<template>
	<view class="deviceDetail Column">
		<!-- <view class="box Column">
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">设备SN</view>
				<view class="colorA7">{{deviceSn}}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">CPU核心数</view>
				<view class="colorA7">{{deviceDetail.cupCore}}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">内存大小</view>
				<view class="colorA7">{{deviceDetail.memory}} GB</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">磁盘容量</view>
				<view class="colorA7">{{ deviceDetail.diskSize }} GB</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">设备IP</view>
				<view class="colorA7">{{deviceDetail.ip}}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">运营商</view>
				<view class="colorA7">{{deviceDetail.operator}}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">上传任务数</view>
				<view class="colorA7">{{ deviceDetail.uploadNum }}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">在线状态</view>
				<view class="colorA7">{{ deviceDetail.onlineStatus == '1' ? '在线' : '离线' }}</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">NAT类型</view>
				<view class="colorA7">{{ deviceDetail.nat === '3' ? 'Port-Restricted Cone NAT' : deviceDetail.nat }}
				</view>
			</view>
			<view class="childs flex-row items-center justifyCont-bet">
				<view class="">upstream</view>
				<view class="colorA7">{{ deviceDetail.upstream }}</view>
			</view>
		</view> -->
		<view class="bgImg"></view>

		<view class="totalRevenue box Row justifyCont-bet">
			<view class="Column">
				<view class="totalRevenueTit">总收益</view>
				<view class="totalMoney">￥ {{ totalRewardAmount }}</view>
				<view class="totalTime">数据截止 {{ monthBandwidthList[monthBandwidthList.length-1].transDate }}</view>
			</view>

			<view class="img">
				<image class="photoSize" src="/static/zongShouYi.png" mode="aspectFill"></image>
			</view>
		</view>

		<view class="dialog">
			<calendar-select-dialog :isWeek="false" :defaultDate="defaultDate" @close="selectDateShow=false"
				@confirm="confirmDate"></calendar-select-dialog>
		</view>

		<view class="chartsBox Column">
			<view class="charts-box-title">流量图</view>
			<view class="Mbps Row">
				<view class="Yuan"></view>跑量<view class="MbpsCont">{{ uploadNum }}Mbps</view>
			</view>

			<view class="charts-box">
				<qiun-data-charts type="line" :monthBandwidthList="monthBandwidthList" :opts="opts"
					:chartData="chartData" :ontap="false" @getIndex="getIndex" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiDeviceInfo
	} from '@/api/device.js';
	import CalendarSelectDialog from "@/uni_modules/fei-calendar-select-dialog/components/fei-calendar-select-dialog/fei-calendar-select-dialog.vue";

	export default {
		components: {
			CalendarSelectDialog
		},
		data() {
			return {
				monthBandwidthList: [],
				totalRewardAmount: 0, // 总收益
				uploadNum: 0, // 总收益

				uploadLists: [],
				uploadIndex: 0,
				dateSwitch: '',
				defaultDate: "",

				deviceSn: '',
				deviceDetail: {},

				chartData: {},
				// 折线图样式
				opts: {
					width: "100%",
					height: "200px",
					color: ["#007aff"],
					dataPointShape: false,
					dataLabel: false,
					padding: [20, 20, 0, 12],
					enableScroll: false,
					series: {
						data: [{
							labelShow: false,
						}]
					},
					legend: {
						fontSize: 2,
					},
					xAxis: {
						axisLine: false, //坐标轴轴线是否显示
						disableGrid: true,
						labelCount: 20,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 14,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
		onLoad(options) {
			this.deviceSn = options.deviceSn;
			this.getDeviceInfo();
		},
		onHide() {
			uni.$off('monthlyData');
		},
		methods: {
			getIndex(e) {
				this.uploadIndex = e.currentIndex.index;
			},

			dateChange(val) {
				this.defaultDate = `${val.year}-${val.month}-01 00:01:01`;
			},
			confirmDate(val) {
				console.log(val[0].date);
				this.dateSwitch = val[0].date;
				this.getDeviceInfo();
			},

			getDeviceInfo() {
				let that = this;
				uni.showLoading({
					title: "数据加载中..."
				})

				const date = that.getCurrentTime('YYYY-MM-DD');
				const timePoints = ["00:00", "04:50", "09:40", "14:30", "19:20", "23:55"];
				let Arrays = {
					categories: [],
					series: [{
						name: '跑量',
						data: []
					}]
				};

				apiDeviceInfo({
						params: {
							deviceSn: that.deviceSn,
							// deviceSn: "HCY20250400722",
							date: that.dateSwitch ? that.dateSwitch : date,
						}
					})
					.then(res => {
						uni.$emit("monthlyData", {
							monthBandwidthList: res.data.monthBandwidthList
						})
						that.monthBandwidthList = res.data.monthBandwidthList;
						that.totalRewardAmount = res.data.total_reward_amount;
						that.uploadNum = res.data.data.uploadNum;
						// console.log(that.monthBandwidthList)
						// 折线图数据处理
						const uploadValues = that.extractUploadValues(res.data.data.bandwiths);
						Arrays.series[0].data = uploadValues;
						that.uploadLists = uploadValues;
						that.opts.xAxis.labelCount = uploadValues.length;

						const maxUploadRounded = Math.round(Math.max(...res.data.data.bandwiths.map(item => item
							.upload)));
						that.opts.yAxis.data[0].max = maxUploadRounded;

						const categories = that.generateCategories(timePoints, uploadValues.length);
						Arrays.categories = categories;
						setTimeout(() => {
							uni.hideLoading()
							that.chartData = JSON.parse(JSON.stringify(Arrays));
						}, 600)
					}).catch(err => {
						uni.hideLoading();
						console.log(err);
					})
			},

			generateCategories(timePoints, totalLength) {
				const n = timePoints.length;
				if (n === 0) return Array(totalLength).fill('');
				if (n >= totalLength) return timePoints.slice(0, totalLength);

				const emptySlots = totalLength - n;
				const baseGap = Math.floor(emptySlots / (n - 1));
				const remainder = emptySlots % (n - 1); // 余数

				let result = [];

				for (let i = 0; i < n; i++) {
					result.push(timePoints[i]);

					if (i < n - 1) {
						const currentGap = baseGap + (i < remainder ? 0 : 0); // 前面几段多加一个空字符串
						result.push(...Array(currentGap).fill(''));
					}
				}

				return result;
			},

			extractUploadValues(data) {
				if (!Array.isArray(data)) return [];
				return data.map(item => item.upload);
			},

			// 当前时间
			getCurrentTime(format = 'YYYY-MM-DD') {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(now.getDate()).padStart(2, '0');

				// 替换模板中的占位符
				return format
					.replace('YYYY', year)
					.replace('MM', month)
					.replace('DD', day)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.bgImg {
		width: 100%;
		height: 180px;
		background: #007aff;
		z-index: 0;
		position: fixed;
		top: -84px;
		left: 0;
	}

	.img {
		width: 80px;
		height: 80px;
	}

	.totalRevenueTit {
		font-size: 14px;
	}

	.totalMoney {
		font-size: 21px;
		/* font-weight: 550; */
		padding: 12px 0;
	}

	.totalTime {
		font-size: 14px;
		color: #989898;
	}

	.dialog {
		z-index: 1;
		margin: 12px 0;
	}

	.chartsBox {
		z-index: 1;
		border-radius: 6px;
		background-color: #fff;
		padding: 12px 8px 0px 0px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.charts-box {}

	.charts-box-title {
		font-size: 15px;
		padding-left: 24px;
	}

	.Mbps {
		color: #adadad;
		font-size: 14px;
		padding: 8px 0 8px 24px;

		.Yuan {
			width: 6px;
			height: 6px;
			border-radius: 100px;
			background-color: #0056FF;
			margin: 0 8px 0 0;
		}

		.MbpsCont {
			font-size: 13px;
			color: #0056FF;
			padding-left: 4px;
		}
	}

	.deviceDetail {
		padding: 24rpx;

		.box {
			z-index: 1;
			border-radius: 12rpx;
			background-color: #fff;
			padding: 24rpx;

			.childs:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			.childs {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.addressChoose {
			z-index: 3;
			width: 96.4%;
			background-color: #fff;
			padding: 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 94%;
				font-size: 30rpx;
				border: none;
				border-radius: 12rpx;
				padding: 6rpx 0;
			}
		}
	}
</style>